<template>
  <div class="card w-[365px]">
    <Header class="header rounded-t-md"></Header>
    <Body class="body"></Body>
    <Footer class="footer rounded-b-md"></Footer>
  </div>
</template>

<script setup>
import Header from "/src/components/Header.vue";
import Body from "/src/components/Body.vue";
import Footer from "/src/components/Footer.vue";
import { provide,reactive,inject,onMounted } from 'vue'

const data = reactive({
  activeIndex:0
})
let $viewer = null
provide('$getActiveIndex',()=>data.activeIndex)
provide('$changeActiveIndex', (newval) => data.activeIndex = newval)
onMounted(() => {
  $viewer = inject('$viewer')
  
})

</script>

<style lang="scss" scoped>
.card {
  position: absolute;
  top: 30px;
  right: 10px;
  color: #fff;
  .header {
    padding-block: 10px;
    padding-inline: 10px;
    background-color: #030e30;
    border: 1px solid #0f386c;
    margin-bottom:1px;
  }
  .body {
    background-color: #0f386c;
    margin-bottom:1px;
  }
  .footer {
    padding-block: 15px;
    background-color: #030e30;
    border: 1px solid #0f386c;
  }
}
</style>
